@import "./_base.scss";
@import "./element.scss";


a{
    text-decoration: none;
}
ul{
    list-style: none;
}

// 隐藏滚动条样式
.hide-scrollbar{
    overflow:auto;
    -ms-overflow-style:none;// ie下隐藏滚动条
    scrollbar-width:none;
    &::-webkit-scrollbar{ //谷歌下隐藏滚动条
        display:none;
    }
}

// 美化滚动条样式--纵向滚动条
.beauty-scrollbar-y{
    overflow-y:auto;
    // 兼容火狐浏览器
    scrollbar-width:thin;
    scrollbar-color:$border-color #fff;
    // 兼容IE浏览器
    scrollbar-darkshadow-color:#fff;
    scrollbar-base-color:$border-color;
    &::-webkit-scrollbar{
        width:5px !important;
    }
    &::-webkit-scrollbar-thumb{
        background-color:$border-color;
        border-radius:5px;
    }
    &::-webkit-scrollbar-track{
        background-color:#fff;
    }
}
// 美化滚动条样式--横向滚动条
.beauty-scrollbar-x{
    overflow-x:auto;
    // 兼容火狐浏览器
    scrollbar-width:thin;
    scrollbar-color:$border-color #fff;
    // 兼容IE浏览器
    scrollbar-darkshadow-color:#fff;
    scrollbar-base-color:$border-color;
    &::-webkit-scrollbar{
        height:5px !important;
    }
    &::-webkit-scrollbar-thumb{
        background-color:$border-color;
        border-radius:5px;
    }
    &::-webkit-scrollbar-track{
        background-color:#fff;
    }
}
// 超出单行省略号展示
.single-ellipsis{
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
// 超出n行省略号展示
@mixin multipleEllipsis($n) {
    display:-webkit-box;
    overflow:hidden;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:$n; //超出n行加省略号
}
// flex布局-row
.flex-row{
    display:flex;
    flex-flow:row nowrap;
}
// flex布局-column
.flex-column{
    display:flex;
    flex-flow:column nowrap;
}


/*
    一些常用的动态通用样式
*/
// 设置定位样式
@mixin QilinPosition($position:absolute,$top:50%,$left:50%){
    position:$position;
    top:$top;
    left:$left;
}
// 设置水平+垂直样式
@mixin QilinFlex($direction:row,$wrap:nowrap,$justify:center,$align:center){
    display:flex;
    flex-flow:$direction $wrap;
    justify-content:$justify;
    align-items:$align;
}
// 设置通配符样式
@mixin QilinGeneral($box:border-box){
    padding:0;
    margin:0;
    box-sizing:$box;
}
// 设置宽高样式
@mixin QilinWidthHeight($width:100%,$height:100%){
    width:$width;
    height:$height;
}
// 设置背景图片样式
@mixin QilinBgImage($url,$size:cover,$repeat:no-repeat){
    background-image:url("#{$url}");
    background-size:$size;
    background-repeat:$repeat;
}

/*
    一些qilin-web中的样式
*/
// 外边距、内边距辅助类
@mixin distance($num,$attribute){
    @if $attribute == m {
        .qilin-#{$attribute}-#{$num}{
            margin:$mp-mini * $num !important;
        }
    } @else if $attribute == ml {
        .qilin-#{$attribute}-#{$num}{
            margin-left:$mp-mini * $num !important;
        }
    } @else if $attribute == mr {
        .qilin-#{$attribute}-#{$num}{
            margin-right:$mp-mini * $num !important;
        }
    } @else if $attribute == mt {
        .qilin-#{$attribute}-#{$num}{
            margin-top:$mp-mini * $num !important;
        }
    } @else if $attribute == mb {
        .qilin-#{$attribute}-#{$num}{
            margin-bottom:$mp-mini * $num !important;
        }
    } @else if $attribute == mx {
        .qilin-#{$attribute}-#{$num}{
            margin-left:$mp-mini * $num !important;
            margin-right:$mp-mini * $num !important;
        }
    } @else if $attribute == my {
        .qilin-#{$attribute}-#{$num}{
            margin-top:$mp-mini * $num !important;
            margin-bottom:$mp-mini * $num !important;
        }
    } @else if $attribute == p {
        .qilin-#{$attribute}-#{$num}{
            padding:$mp-mini * $num !important;
        }
    } @else if $attribute == pl {
        .qilin-#{$attribute}-#{$num}{
            padding-left:$mp-mini * $num !important;
        }
    } @else if $attribute == pr {
        .qilin-#{$attribute}-#{$num}{
            padding-right:$mp-mini * $num !important;
        }
    } @else if $attribute == pt {
        .qilin-#{$attribute}-#{$num}{
            padding-top:$mp-mini * $num !important;
        }
    } @else if $attribute == pb {
        .qilin-#{$attribute}-#{$num}{
            padding-bottom:$mp-mini * $num !important;
        }
    } @else if $attribute == px {
        .qilin-#{$attribute}-#{$num}{
            padding-left:$mp-mini * $num !important;
            padding-right:$mp-mini * $num !important;
        }
    } @else if $attribute == py {
        .qilin-#{$attribute}-#{$num}{
            padding-top:$mp-mini * $num !important;
            padding-bottom:$mp-mini * $num !important;
        }
    }
};

@for $i from 1 through 20 {
    @include distance($i,m);
	@include distance($i,ml);
	@include distance($i,mr);
	@include distance($i,mt);
	@include distance($i,mb);
	@include distance($i,mx);
	@include distance($i,my);
	@include distance($i,p);
	@include distance($i,pl);
	@include distance($i,pr);
	@include distance($i,pt);
	@include distance($i,pb);
	@include distance($i,px);
	@include distance($i,py);
}

// 普通样式文本
.qilin-text-info{
    color:$color-text-info !important;
}
// 成功样式文本
.qilin-text-success{
    color:$color-text-success !important;
}
// 警告样式文本
.qilin-text-warning{
    color:$color-text-warning !important;
}
// 错误样式文本
.qilin-text-error{
    color:$color-text-error !important;
}
// 普通样式背景色
.qilin-bg-info{
    background-color:$color-text-shadow-info !important;
    color:$color-text-info !important;
}
// 成功样式背景色
.qilin-bg-success{
    background-color:$color-text-shadow-success !important;
    color:$color-text-success !important;
}
// 警告样式背景色
.qilin-bg-warning{
    background-color:$color-text-shadow-warning !important;
    color:$color-text-warning !important;
}
// 错误样式背景色
.qilin-bg-error{
    background-color:$color-text-shadow-error !important;
    color:$color-text-error !important;
}
// 通用面板动态样式
.qilin-panel{
    background-color:var(--themeBgColor) !important;
    border-color:var(--themeBorderColor) !important;
}


// 圆角样式
.qilin-radius-default{
    border-radius:$radius-default !important;
}
.qilin-radius-round{
    border-radius:$radius-round !important;
}
.qilin-radius-circle{
    border-radius:$radius-circle !important;
}

// 字体加粗等样式
.qilin-text-bolder{
    font-weight:bolder !important;
}
.qilin-text-normal{
    font-weight:normal !important;
}
.qilin-text-lighter{
    font-weight:lighter !important;
}

// 背景阴影样式
.qilin-shadow{
    box-shadow:$rem2 $rem2 $rem5 var(--shadow) !important;
}